<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>个人资料</title>
		<script src="__INDEX__/js/mui.min.js"></script>
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="__INDEX__/css/mui.picker.min.css" />
		<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
		<link rel="stylesheet" href="__INDEX__/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/css/member.css" />
	</head>
    <style>
    	.mui-input-group{
    		background-color: #efeff4; 
    	}
    	.mui-btn, button, input[type=button], input[type=reset], input[type=submit]{
    		background-color: #2783e7;
    	}
    	.mui-btn-block{
    		padding: 5px 0;
    		border-radius: 5px;
    	}
    	select{
    		background-color: #efeff4; 
    	}
    	.mui-input-row select{
    		font-size: 15px;
    	}
    </style>
	<body onload="loadProvince()">
		<header class="mui-bar mui-bar-nav">
			<a class=" mui-icon mui-icon-left-nav mui-pull-left" href="JavaScript:history.go(-1)"></a>
			<h1 class="mui-title">个人资料</h1>
		</header>
		<div class="mui-content ">
			<div class="gerenzl_nr">
				<form id='my_form' class="mui-input-group gerenzl_group layui-form update_form">

					<div class="mui-input-row ">
						<label>微信昵称</label>
						<input type="text" readonly="readonly" value="{$info.nickname}" id="nickname" class="mui-input-group" placeholder="微信昵称" lay-verify="required">
					</div>
					<div class="mui-input-row">
						<label>会员ID</label>
						<input type="text" readonly="readonly" value="{$info.id}" id="id" style="width: 65%;font-size: 15px;" lay-verify="required" class="mui-input-group" placeholder="会员ID">
					</div>
					<div class="mui-input-row">
						<label><em>*</em>姓名</label>
						<input type="text" id="user_name" value="{$info.user_name}" name="user_name" style="width: 65%;font-size: 15px;" lay-verify="required" class="mui-input-group" placeholder="姓名">
					</div>
					<div class="mui-input-row">
						<label>手机号</label>
						<input type="text" readonly="readonly" value="{$info.mobile}" id="mobile" style="width: 65%;font-size: 15px;" lay-verify="required" class="mui-input-group" placeholder="手机号">
					</div>
					<div class="mui-input-row">
						<label>会员级别</label>
						<input type="text" readonly="readonly" value="{$info.name}" id="name" style="width: 65%;font-size: 15px;" lay-verify="required" class="mui-input-group" placeholder="会员级别">
					</div>
					<div class="mui-input-row shengri" data-options='{"type":"date"}'>
						<label><em>*</em>生日</label>
						<input type="text" id="birthday" name="birthday" value="{$info.birthday}" style="width: 65%;font-size: 15px;" lay-verify="required" class="mui-input-group" placeholder="生日">
					</div>
					<div class="mui-input-row">
						<label><em>*</em>性别</label>
						<div style="margin-left: 160px;">
							<input type="radio" name="sex" value="1" title="男" {if $info['sex']==1 }checked{/if}>
							<input type="radio" name="sex" value="2" title="女" {if $info['sex']==2 }checked{/if}>
					   </div> 
					</div>
					<div class="mui-input-row">
						<label><em>*</em>邮箱</label>
						<input type="text" id="email" name="email" value="{$info.email}" style="width: 65%;font-size: 15px;" lay-verify="required" class="mui-input-group" placeholder="邮箱">
					</div>
					<div class="mui-input-row">
						<label><em>*</em>省/市</label>
						<input type="hidden" name="city" id='city'>
						<input type="hidden" name="province" id='province'>
						
						<select lay-ignore id="proS" onchange="loadCity()"  style="margin-left: 70px;width: 25%;float: unset;">
						  <option value="" >{$info.province|default='请选择'}</option>
						</select> 
						<select lay-ignore id="cityS" style="width: 25%; ">
						  <option value="">{$info.city|default='请选择'}</option>
						</select>  
					</div>
					<div class="mui-input-row">
						<label><em>*</em>地址</label>
						<input type="text" id="addres" name="addres" value="{$info.addres}" style="width: 65%;font-size: 15px;" lay-verify="required" class="mui-input-group" placeholder="地址">
					</div>
					<div class="mui-input-row">
						<label>业务员</label>
						<input type="text" readonly="readonly" value="{$info.ywy}" id="staff_id" style="width: 65%;font-size: 15px;" lay-verify="required" class="mui-input-group" placeholder="业务员">
					</div>
				</form>
				<div style="width: 80%;margin: 0 auto;margin-top: 25px;">
						<button class="mui-btn mui-btn-block login_btn" id="btn" style="color: white;">确认</button>
			    </div>
			</div>
		</div>
	</body>

</html>
{include file="public/footer" /}
<script src="__INDEX__/js/mui.picker.min.js"></script>
<script src="__INDEX__/js/pro.js"></script>
<script  type="text/javascript" src="__INDEX__/js/city.js"></script>
<script>
	(function($) {
		$.init();
		var btns = $('.shengri'); 

		//入住时间
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var _self = this;
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				/*
				 * 首次显示时实例化组件
				 * 示例为了简洁，将 options 放在了按钮的 dom 上
				 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
				 */
				_self.picker = new $.DtPicker(options);
				_self.picker.show(function(rs) {  
					/*
					 * rs.value 拼合后的 value
					 * rs.text 拼合后的 text
					 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
					 * rs.m 月，用法同年
					 * rs.d 日，用法同年
					 * rs.h 时，用法同年
					 * rs.i 分（minutes 的第二个字母），用法同年
					 */
					jQuery("#birthday").val(rs); //赋值选择的日期
					/* 
					 * 返回 false 可以阻止选择框的关闭
					 * return false;
					 */
					/*
					 * 释放组件资源，释放后将将不能再操作组件
					 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
					 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
					 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
					 */
					_self.picker.dispose();
					_self.picker = null; 
				});
			}, false);
		});  
	})(mui);
	
	$('#btn').click(function(){ 
		var province_tilte = $("#proS").find("option:selected").text(); 
		$('#province').val(province_tilte);
		
		var city_tilte = $("#cityS").find("option:selected").text(); 
		$('#city').val(city_tilte);
    	var email = $('#email').val();
    	var user_name = $('#user_name').val();
    	var birthday = $('#birthday').val();
    	var sex = $('input[name="sex"]:checked').val();
    	var addres = $('#addres').val();
    	var city = $('#city').val();
    	var province = $('#province').val();
    	var myReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
		if(email){
			if(!myReg.test(email)){
		　　　　   	layer.msg('邮箱格式不对!');
				return false;
		　　  }
		}else{
			layer.msg('请填写邮箱!');
			return false;
		}
		if(!user_name){
	　　　　   	layer.msg('请填写姓名!');
			return false;
		}
		if(!birthday){
	　　　　   	layer.msg('请填写生日!');
			return false;
		}
	    if(!sex){
	　　　　   	layer.msg('请填写性别!');
			return false;
		}
	     if(!province && !addres && !city){
	　　　　   	layer.msg('请填写省市地址!');
			return false;
		}
	    if(!province){
	　　　　   	layer.msg('请填写省!');
			return false;
		}
	    if(!city){
	　　　　   	layer.msg('请填写市!');
			return false;
		}
	    if(!addres){
	　　　　   	layer.msg('请填写地址!');
			return false;
		}
		$.ajax({
			url: "{:url('index/member/member')}",
			data: $('#my_form').serialize(),
			type: 'post',
			async: false,
			success: function(res) { 
			    if(res.code == 200) {
                  mui.toast(res.msg);  
                } else {
                  mui.toast(res.msg);
                }
			}
		})
	});
</script>
<script type="text/javascript">
			var proS=document.getElementById("proS"),cityS=document.getElementById("cityS");
			function loadProvince(){
				var tempFragment = document.createDocumentFragment();
				for(var i=0;i<proData_.length;i++){
					var option=document.createElement("option");
					option.setAttribute("value",proData_[i].pk);
					option.setAttribute("calss",'layui-select-title');
					option.innerHTML=proData_[i].pv;
					tempFragment.appendChild(option);
				}
				//使用dom碎片，减少对dom的重复操作
				proS.appendChild(tempFragment);
			}
			function loadCity(){
				if(proS.value==0){
					return;
				}else{
					cityS.innerHTML="<option value='0'>请选择</option>";
					var hasFound=false;
					var tempFragment = document.createDocumentFragment();
					for(var i=0;i<cityData_.length;i++){
						if(proS.value==cityData_[i].pk){
							hasFound=true;
							var option=document.createElement("option");
							option.setAttribute("value",cityData_[i].ck);
							option.setAttribute("calss",'layui-select-title');
							option.innerHTML=cityData_[i].cv;
							tempFragment.appendChild(option);
							
						}else{
							//需要查找的数据都是放一块的，如果匹配过，又出现不匹配，那么之后数据肯定都是不匹配的。可以pass掉，减少循环次数
							if(hasFound){
								break;
							}
						}
					}
					cityS.appendChild(tempFragment);
				}
			}
</script>